<template>
    <div class="tablebox">
        <table  border="1px solid #9B9B9B" cellspacing="0" cellpadding="5">
            <thead>
                <tr>
                    <td rowspan="5">日期</td>
                    <td v-for="(item,key) in pickProcess" :key="key" :colspan="item===1?5:10" :rowspan="item===1?2:1">{{ key }}</td>
                </tr>
                <tr>
                    <td v-for="(item,index) in createdouble" :key="index" colspan="5">{{ item }}</td>
                </tr>
                <tr>
                    <td v-for="(item,index) in computedIndex" :key="index">{{ item }}</td>
                </tr>
                <tr>
                    <td v-for="(item,index) in computedMonth" :key="index">{{ item }}</td>
                </tr>
                <tr>
                    <td v-for="(item,index) in computedDay" :key="index">{{ item }}</td>
                </tr>
                <tr>
                    <td>排产天数</td>
                    <td v-for="(item,index) in schedule" :key="index">{{ item }}</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(time,index) in date" :key="index">
                    <td>{{ time.month+'月'+time.day+"日" }}</td>
                    <TableSlot v-for="item in data">
                        <td v-for="(pro,key) in dataType">{{ item.data[key][index] }}</td>
                    </TableSlot>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup>
import { computed, ref } from 'vue';
import mock from '../components/totalProductionReport/mock';
import TableSlot from '../components/TableSlot.vue';

const monthDataType = ref(['月计划','投入','产出','合格率','完工率'])
const dataType = ref({plan:'计划',input:'投入',output:'产出',yield:'合格率',achieve:'完工率'})
const data = ref([])
const date = ref([])

const getData = ()=>{
    date.value = [...mock.date]
    data.value = [...mock.data]
}

const pickProcess = computed(()=>{
    let obj = {}
    data.value.forEach(item=>{
        if(obj[item.process]){
            obj[item.process] = obj[item.process]+1
        }else{
            obj[item.process] = 1
        }
    })
    return obj
})

const createdouble = computed(()=>{
    let arr = []
    data.value.forEach(item=>{
        if(item.side){
            arr.push(item.side)
        }
    })
    return arr
})
const computedIndex = computed(()=>{
    let arr = []
    data.value.forEach(item=>{
        arr = [...arr,...monthDataType.value]
    })
    return arr
})
const computedMonth = computed(()=>{
    let arr = []
    data.value.forEach(item=>{
        arr = [...arr,...item.month]
    })
    return arr
})
const computedDay = computed(()=>{
    let arr = []
    let typearr = []
    typearr = Object.values(dataType.value)
    data.value.forEach(item=>{
        arr = [...arr,...typearr]
    })
    return arr
})
const schedule = computed(()=>{
    let arr = []
    data.value.forEach(item=>{
        arr = [...arr,...item.schedule]
    })
    return arr
})

getData()
</script>

<style scoped>
td{
    min-width: 50px;
    min-height: 25px;
    padding: 5px;
}
.tablebox{
    text-align: center;
    width: auto;
    white-space: nowrap;
    width: 100%;
}
td:hover{
    background-color: rgb(187, 187, 187);
}
tr:hover{
    background-color: rgb(238, 238, 238);
}
thead{
    position: sticky;
    top:0;
    background-color: rgba(213, 213, 213, 0.7);
    backdrop-filter: blur(4px);
}
</style>
